import Vue from 'vue'

// new Vue({
//   el: '#root',
//   template: '<div>this is content</div>'
// })

const app = new Vue({
  template: '<div>{{text}} {{obj.a}}</div>',
  data: {
    text: 0,
    obj: {}
  }
  // watch: {
  //   text (newText, oldText) {
  //     console.log(`${newText} : ${oldText} `)
  //   }
  // }
})

app.$mount('#root')
app.text = 1
let i = 0
setInterval(() => {
  // app.text += 1
  i++
  // app.obj.a = i
  app.$set(app.obj, 'a', i)
  // app.$forceUpdate()
  // app.$options.data.text += 1  不会引用
  // app.$data.text += 1  会加1
}, 1000)

// console.log(app.$data)

// console.log(app.$props)

// 对应的html节点
// console.log(app.$el)

// console.log(app.$options)
// app.$options.render = (h) => {
//   return h('div', {}, 'new render function')
// }

// console.log(app.$root === app)

// console.log(app.$children)

// console.log(app.$slots)
// console.log(app.$scopedSlots)

// refs,快速定位节点的位置
// console.log(app.$refs)

// console.log(app.$isServer)

// watch在vue里面的时候，在销毁的时候可以自动销毁，而在外面设置的watch，需要手动销毁
// const unWatch = app.$watch('text', (newText, oldText) => {
//   console.log(`${newText} : ${oldText} `)
// })

// setTimeout(() => {
//   unWatch()
// }, 3000)

// app.$on('text', (a, b) => {
//   console.log(`test emited ${a} ${b}`)
// })

// app.$emit('text', 1, 2)

// app.$once('text', (a, b) => {
//   console.log(`test emited ${a} ${b}`)
// })

// setTimeout(() => {
//   app.$emit('text', 1, 2)
// }, 1000)
